<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app" class="demo">
            <input type="text" v-model="message">
            <p>{{message}}</p>

            <p style = "font-size:25px;">计数器: {{ counter }}</p>
            <button @click = "counter++" style = "font-size:25px;">点我</button>

        </div>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        counter:4,
                        message:"jiang is working"
                    }
                }
                // ,
                // methods:{
                //     increment(){
                //         // `this` 指向该组件实例
                //         this.count++
                //     }
                // }
            })

            const vm = app.mount('#app')
            // document.write(vm.$data.count)
            // document.write("<br>")
            
            // vm.increment()
            // document.write(vm.count) // => 6
            vm.$watch('counter', function(nval, oval) {
                alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
            })
        </script>
    </body>
</html>